<template>
	<view>
		<view class="timebox">
			<view class="titlebox">云智慧选广场停车场</view>
			<view class="viewbox" style="transform: rotate(-75deg);">
				<view class="viewitem" :style="{
					transform: `rotate(${-15 * index}deg)translateY(200rpx)`,
					background:getTimeIndex>index ? '#F99529' : '#e5e5e5'
				}" v-for="(item, index) in 15" :key="index"></view>
			</view>
			<view class="timeinfo">停车时长</view>
			<view class="time">{{ duration }}</view>
		</view>
		<view class="carinfo">
			<view class="title">入场时间</view>
			<view class="entertime">{{ info.enterTime }}</view>
			<view class="carrecord">
				<view class="carnum">
					<view>车辆牌照</view>
					<view class="carvalue">{{ car_no || '' }}</view>
				</view>
				<view class="carnum">
					<view>停车收费</view>
					<view class="carvalue">￥{{ totalPrice<=0?0:totalPrice}}</view>
				</view>
			</view>
		</view>
		<view class="storebox" style="margin-top: 20rpx;">
			<view class="topicbox" @click="open()">
				<view>商品券/店铺券</view>
				<view style="display: flex;align-items: center;">
					<view style="color: #F94D29;" v-if="couponinfo.coupon_type">
						<text v-if="couponinfo.coupon_type==1">-￥{{couponinfo.coupon_money}}</text>
						<text v-if="couponinfo.coupon_type==3">-￥{{couponinfo.usable_money}}</text>
						<text v-if="couponinfo.coupon_type==2">{{couponinfo.discount_percent/10}}折</text>
					</view>
					<view class="coupon" v-else >{{couponlong||0}}张可用</view>
					<!-- <view class="coupon">{{couponlong||0}}张可用</view> -->
					<image src="../../static/jt.png"></image>
				</view>
			</view>
			<!-- <view class="topicbox">
				<view>会员抵扣</view>
				<view class="pricebox">￥0.00</view>
			</view> -->
		</view>
		<view class="paybox" v-if="totalPrice>0">
			<view class="titlebox">支付方式</view>
			<view class="paylist" v-for="(item,index) in paytype" :key="index" @click="handlepay(item)">
				<view class="right">
					<image :src="item.img"></image>
					{{item.title}}
					<text style="color: #F94D29;" v-if="index==0">{{myinfo.balance||0}}</text>
					<text style="color: #F94D29;" v-if="index==1">{{myinfo.wx_balance||0}}</text>
				</view>
				<image v-if="typeindex==item.id" src="../../static/gou.png"></image>
				<image v-else src="../../static/yuan.png"></image>
			</view>
		</view>
		<view class="tipbox">
			缴费提示：车辆缴费后需在15分钟内出场
		</view>
		<view style="height: 130rpx;"></view>
		<view class="pay-button" @click="pay">
			<view>立即支付</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<coupon @handlecoupon="handlecoupon" @close="close" :list="couponlist"></coupon>
		</uni-popup>
	</view>
</template>

<script>
	import coupon from '../../components/coupon.vue'
export default {
	components:{
		coupon
	},
	data() {
		return {
			duration: '00:00:00',
			info: null,
			car_no: '',
			interval: null,
			paytype:[{img:'../../static/dou.png',title:'优生活支付',id:1},{img:'../../static/ye.png',title:'余额支付',id:2},
			{img:'../../static/wx1.png',title:'微信支付',id:3}],//支付类型列表 1 pos余额支付 2 帐户余额支付 3 微信支付
			typeindex:null,
			couponinfo:{},
			coupon_id:'',
			key:'',
			myinfo:{},
			token:'',
			couponlong:0,
			couponlist:[],
			fding:true,
		}
	},
	onLoad(option) {
		// this.getinfo()
		if(option.car_no){
			this.car_no = option.car_no
			this.getInfo()
		}if(option.scene){
			this.scene = decodeURIComponent(option.scene)
			this.scene = this.scene.split('&')
			this.getcarinfo()
		}if(option.key){
			this.key = option.key
			this.getInfo()
		}
		console.log(option,'option',decodeURIComponent(option.scene),this.scene)
	},
	onShow() {
		this.token = uni.getStorageSync('token')||''
		if(this.token){
			this.getinfo()
		}
	},
	computed:{
		getTimeIndex(){
			return this.duration?Math.abs((Date.parse(this.info.enterTime) - Date.parse(new Date())) / 1000)/3600*60/120:0
		}
	},
	computed: {
		//计算选中商品的总价
		totalPrice() {
			let totalPrice = 0;
			//coupon_type==1 coupon_money满减劵 coupon_type==2 折扣劵
			
			if(this.couponinfo.coupon_type==1){
				totalPrice = parseFloat(this.info.totalAmount) - (parseFloat(this.couponinfo.coupon_money))
				// console.log(totalPrice,'totalPrice')
			}
			if(this.couponinfo.coupon_type==2){
				totalPrice = parseFloat(this.info.totalAmount) * (parseFloat(this.couponinfo.discount_percent/100)||0)
			}
			if(this.couponinfo.coupon_type==3){
				totalPrice = parseFloat(this.info.totalAmount) - (parseFloat(this.couponinfo.usable_money)||0)
			}
			if(!this.couponinfo.coupon_type){
				totalPrice = parseFloat(this.info.totalAmount)
			}
			//typeindex 1 pos余额支付 2 帐户余额支付 3 微信支付
			if(totalPrice<=0){
				totalPrice = 0
				this.typeindex = 1
			}
			// console.log(parseFloat(this.info.totalAmount)-parseFloat(this.couponinfo.coupon_money),this.couponinfo,totalPrice,parseFloat(totalPrice.toFixed(2)))
			// return totalPrice
			return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
		},
	},
	methods: {
		async getInfo() {
			this.getinfo()
			let { data } = await this.$http({
				url: 'api/wechat/payBindCar',
				data: {
					car_no: this.car_no,
					key:this.key ,
				}
			})
			this.info = data
			this.interval = setInterval(() => {
				let seconds = Math.abs((Date.parse(this.info.enterTime) - Date.parse(new Date())) / 1000)
				let hour = Math.floor(seconds / 3600)
				let minute = Math.floor((seconds % 3600) / 60)
				let second = Math.floor((seconds % 3600) % 60)
				this.duration = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
			}, 1000);
			this.getcouopn()
		},
		getinfo() {
			this.$http({
				url: 'api/wechat/userinfo',
			}).then(res => {
				this.myinfo = res.data
			})
		},
		getcarinfo(){
			this.getinfo()
			this.$http({
				url:'api/carapi/getVehicleCarInfo',
				data:{
					parkKey:this.scene[0],
					ctrlNo:this.scene[1],
				}
			}).then(res=>{
				console.log(res,'res')
				if(res.data.carNo){
					this.info = res.data
					this.car_no = this.info.carNo
					this.getcouopn()
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			})
		},
		open(){
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs.popup.open('bottom')
		},
		close() {
			this.$refs.popup.close()
		},
		//获取优惠卷
		getcouopn(){
			this.$http({
				url:'api/Wechat/getCouponByOrder',
				data:{
					order_money:this.info.totalAmount,
					type:3,//1商城下单 2外卖下单 3停车场 4商户
					goods_ids:'',
					merch_id:'',
				}
			}).then(res=>{
				this.couponlist = res.data
				this.couponlong = res.data.length
				console.log(this.couponlist,this.couponlong,'this.couponlong')
			})
		},
		//获取选择的优惠卷信息
		handlecoupon(result){
			console.log(result,'result')
			this.couponinfo = result
			this.coupon_id =''
			this.coupon_id = result.id
		},
		//选择支付类型
		handlepay(item){
			this.typeindex = item.id
		},
		async pay() {
			if(this.typeindex==null){
				uni.showToast({
					title:'请选择支付方式',
					icon:'none'
				})
				return
			}
			if(this.fding){
				this.fding = false
				uni.showModal({
					title: '提示',
					content: '确认结算并离场吗？缴费提示：车辆缴费后需在15分钟内出场',
					showCancel: true,
					success: async ({ confirm, cancel }) => {
						if (confirm) {
							
							await this.getInfo(this.car_no)
							await this.$http({
								url: 'api/wechat/createCarOrder1',
								data: {
									car_no: this.car_no,
									orderAmount:this.totalPrice,
									coupon_id:this.coupon_id
								}
							}).then(res=>{
								//typeindex 1 pos余额支付 2 帐户余额支付 3 微信支付
								if(this.typeindex==1||this.typeindex==2){
									this.balancepay(res.data)
									// uni.showToast({
									// 	title:'正在加紧开发中',
									// 	icon:'none'
									// })
								}else{
									this.wechatPay(res.data)
								}
								console.log(res.data)
								
							})
						}
					}
				})
			}
			
		},
		//余额支付接口
		balancepay(orderid){
			this.$http({
				url:'api/lklpay/payCarOrderByBalance1',
				data:{
					order_sn:orderid,
					pay_type:this.typeindex,//1pos余额支付 2帐户余额支付
					coupon_id:this.coupon_id
				}
			}).then(res=>{
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				})
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/index/index'
					})
				},1200)
			})
		},
		async wechatPay(order_sn) {
			const {data} = await this.$http({
				url: 'api/lklpay/carOrderPay',//api/wxpay/storeOrderPay
				data: {
					order_sn
				},
			})
			let that = this
			console.log(data,'data')
			uni.requestPayment({
				timeStamp: data.rows.timestamp,
				nonceStr: data.rows.nonce_str,
				package: data.rows.package,
				signType: "RSA",
				paySign: data.rows.pay_sign,
				// prepay_id:data.rows.prepay_id,
				success: function(res) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1200)
				},
				fail: function(res) {
					console.log(res,'res')
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				},
			})
			
		},
	}
}
</script>

<style lang="scss" scoped>
.timebox {
	width: 690rpx;
	height: 435rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin: 0 auto;

	.titlebox {
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
	}

	.viewbox {
		display: flex;
		justify-content: space-around;
		position: relative;
		width: 70rpx;
		margin: 0 auto;
		left: -36rpx;
		top: 220rpx;

		.viewitem {
			width: 25rpx;
			height: 50rpx;
			position: absolute;

		}
	}

	.timeinfo {
		text-align: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #555555;
		margin-top: 185rpx;
	}

	.time {
		font-size: 40rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		text-align: center;
		margin-top: 15rpx;
	}
}

.carinfo {
	width: 690rpx;
	// height: 240rpx;
	padding-bottom: 20rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin: 15rpx auto;
	text-align: center;

	.entertime {
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
	}

	.title {
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #555555;
	}

	.carrecord {
		display: flex;
		margin-top: 28rpx;

		.carnum {
			width: 50%;
			text-align: center;
			font-size: 26rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #555555;

			.carvalue {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				margin-top: 28rpx;
			}
		}
	}
}
.storebox{
		width: 690rpx;
		// height: 386rpx;
		background: #FFFFFF;
		border-radius: 10rpx ;
		padding: 0 30rpx;
		.storeinfo{
			height: 190rpx;
			border-bottom: solid 2rpx #E9E9E9;
			.storename{
				display: flex;
				height: 116rpx;
				align-items: center;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 18rpx;
				}
			}
			.storephone{
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				.phone{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					image{
						width: 39rpx;
						height: 39rpx;
						margin-left: 30rpx;
					}
				}
			}
		}
		.topicbox{
			height: 97rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;
			image{
				width: 11rpx;
				height: 19rpx;
				margin-left: 20rpx;
			}
			.pricebox{
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #F94D29;
			}
			.coupon{
				width: fit-content;
				height: 44rpx;
				background: #F94D29;
				border-radius: 8rpx;
				font-size: 26rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #FFFFFF;
				padding: 0 13rpx;
				line-height: 44rpx;
			}
		}
	}
//支付信息
	.paybox{
		width: 690rpx;
		// height: 302rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding:10rpx 30rpx 0 30rpx;
		.titlebox{
			// height: 108rpx;
			margin:0 0 20rpx 0;
			width: 112rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			background: linear-gradient(180deg, #FFF 80%, #ffedea 100%);
		}
		.paylist{
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.right{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #222222;
				image{
					width: 46rpx;
					height: 46rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

.tipbox {
	margin-left: 30rpx;
	font-size: 24rpx;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #888888;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}

.pay-button {
	position: fixed;
	bottom: env(safe-area-inset-bottom);
	left: 50%;
	transform: translateX(-50%);

	view {
		width: 90vw;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: white;
		background-color: #F99529;
		border-radius: 100rpx;
	}
}</style>
